

<template>
  <view class="Mall4j container">
    <view class="main">
      <!-- 信息输入框 -->
      <view class="section">
        <input :placeholder="i18n.mobilePhone" type="number" maxlength="11" @input="onMobileInput"></input>
      </view>
      <view v-if="needRealName" class="section">
        <input :placeholder="i18n.actualName" type="text" @input="onRealNameInput"></input>
      </view>
      <view v-if="needIdCardNo" class="section">
        <input :placeholder="i18n.identification" type="text" maxlength="18" @input="onIdCardNoInput"></input>
      </view>
      <view v-if="neddIdCardPic">
        <view class="upload" @tap="uploadIdCardFront">
          <image v-if="identityCardPicFrontCom" :src="identityCardPicFrontCom" />
          <text v-else>{{ i18n.uploadIDFront }}</text>
        </view>
        <view class="upload" @tap="uploadIdCardBack">
          <image v-if="identityCardPicBackCom" :src="identityCardPicBackCom" />
          <text v-else>{{ i18n.uploadIDBack }}</text>
        </view>
        <view class="upload" @tap="uploadIdCardHold">
          <image v-if="identityCardPicHoldCom" :src="identityCardPicHoldCom" />
          <text v-else>{{ i18n.uploadIDHand }}</text>
        </view>
      </view>

      <!-- 提交申请栏 -->
      <view class="submit-btn" @tap="submitDisterApply">
        <text>{{ i18n.submitApplication }}</text>
      </view>
      <!--end 提交申请栏 -->

      <!-- 返回首页 -->
      <view v-if="showIndexBtn" class="submit-btn plain-btn" @tap="toIndex">
        <text>{{ i18n.backHomepage }}</text>
      </view>
      <!--end 返回首页  -->

      <!-- 系统判定的条件展示 -->
      <view v-if="distributionCondition.autoCheck === 1" class="system-decision">
        <view class="system-decision-title">
          {{ i18n.autoCheck }}
        </view>
        <view class="requirements">
          <view v-if="distributionCondition.expenseNumber" class="requirement-item">
            {{ i18n.consumptionTimes }} {{ distributionCondition.expenseNumber }}{{ i18n.afterConfirm }}
          </view>
          <view v-if="distributionCondition.expenseAmount" class="requirement-item">
            {{ i18n.spendingAmount }} {{ distributionCondition.expenseAmount }}{{ i18n.afterConfirm }}
          </view>
          <view v-if="distributionCondition.prodIdList && prodList.length" class="requirement-item">
            <view class="prod-title">
              {{ i18n.buyDesignatedProd }}{{ i18n.afterConfirm }}
            </view>
            <view class="prod-con">
              <block v-for="(item, key) in prodList" :key="key">
                <prod :item="item" />
              </block>
            </view>
          </view>
        </view>
      </view>
    <!-- 系统判定的条件展示 end -->
    </view>
  </view>
</template>

<script>
var http = require('../../utils/http.js')
var util = require('../../utils/util.js')
import prod from '../../components/production/index.vue'

export default {

  components: {
    prod
  },
  props: {},
  data() {
    return {
      identityCardNumber: '',
      identityCardPicBack: '',
      identityCardPicFront: '',
      identityCardPicHold: '',
      identityCardPicBackCom: '',
      identityCardPicFrontCom: '',
      identityCardPicHoldCom: '',
      realName: '',
      sharerCardNo: '',
      // shopId: 1,
      userMobile: '',
      needIdCardNo: false,
      neddIdCardPic: false,
      needRealName: false,
      distributionCardNo: '',
      // 返回首页按钮显隐 (扫码进入时显示)
      showIndexBtn: false,
      // 申请分销员的条件
      distributionCondition: {},
      // 指定的商品列表
      prodList: []
    }
  },
  computed: {
    i18n() {
      return this.$t('index')
    }
  },

  onShow: function() {
    // 头部导航标题
    uni.setNavigationBarTitle({
      title: this.i18n.applyDistributor
    })
    this.getApplyInfo()
    this.showIndexBtn = getCurrentPages().length <= 1
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    if (this.$Route.query.scene) {
    // #ifdef MP-WEIXIN
      const scene = decodeURIComponent(this.$Route.query.scene)
      this.setData({
        distributionCardNo: scene
      })
      // #endif

      // #ifdef H5 || APP-PLUS
      this.distributionCardNo = this.$Route.query.scene
    // #endif
    }
  },
  methods: {
    /**
		 * 返回首页
		 */
    toIndex() {
      this.$Router.pushTab('/pages/index/index')
    },

    /**
     * 获取平台分销信息
     */
    getDistInfo() {
      // 查询分销开关是否开启
      http.request({
        url: '/p/distribution/distributionBasicSet/canDistribution',
        method: 'GET',
        data: {
          shopId: 1
        },
        dontTrunLogin: true,
        callBack: res => {
          if (res === 1) {
            this.getApplyInfo()
          }
        }
      })
    },

    /**
     * 获取申请分销需要填写的信息
     */
    getApplyInfo() {
      var params = {
        url: '/p/distribution/register/condition',
        method: 'GET',
        callBack: res => {
          this.distributionCondition = res
          console.log('res', res)
          if (res.prodIdList && res.prodIdList.length) {
            this.getProdList(res.prodIdList)
          }
          if (res.distributionSwitch) {
            this.setData({
              needIdCardNo: res.identityCardNumber,
              neddIdCardPic: res.identityCardPic,
              needRealName: res.realName
            })
          } else {
            uni.showModal({
              content: this.i18n.distributionPromotionHasBeenClosed,
              showCancel: false,
              confirmText: this.i18n.confirm,
              success: (res) => {
                if (res.confirm) {
                  uni.switchTab({
                    url: !this.distributionCardNo ? '/pages/user/user' : '/pages/index/index'
                  })
                }
              }
            })
          }
        }
      }
      http.request(params)
    },

    /**
     * 获取商品列表
     */
    getProdList(prodIdList) {
      const params = {
        url: '/prod/listProdByIdsAndType',
        method: 'GET',
        data: {
          prodIds: prodIdList.toString()
        },
        callBack: res => {
          // console.log(res)
          this.prodList = res
        }
      }
      http.request(params)
    },

    onMobileInput: function(e) {
      this.setData({
        userMobile: e.detail.value
      })
    },
    onRealNameInput: function(e) {
      this.setData({
        realName: e.detail.value
      })
    },
    onIdCardNoInput: function(e) {
      this.setData({
        identityCardNumber: e.detail.value
      })
    },
    uploadIdCardFront: function() {
      uni.chooseImage({
        count: 1,
        // 默认9
        sizeType: ['compressed'],
        sourceType: ['album'],
        success: (res) => {
          var tempFilePaths = res.tempFilePaths
          var params = {
            url: '/p/file/upload',
            filePath: tempFilePaths[0],
            name: 'file',
            callBack: (res2) => {
              this.identityCardPicFrontCom = res2.resourcesUrl + res2.filePath
              this.identityCardPicFront = res2.filePath
            }
          }
          if (util.lessThan2M(res.tempFiles)) {
            http.upload(params)
          }
        }
      })
    },
    uploadIdCardBack: function() {
      uni.chooseImage({
        count: 1,
        // 默认9
        sizeType: ['compressed'],
        sourceType: ['album'],
        success: (res) => {
          var tempFilePaths = res.tempFilePaths
          var params = {
            url: '/p/file/upload',
            filePath: tempFilePaths[0],
            name: 'file',
            callBack: (res2) => {
              this.setData({
                identityCardPicBackCom: res2.resourcesUrl + res2.filePath,
                identityCardPicBack: res2.filePath
              })
            }
          }
          if (util.lessThan2M(res.tempFiles)) {
            http.upload(params)
          }
        }
      })
    },
    uploadIdCardHold: function() {
      uni.chooseImage({
        count: 1,
        // 默认9
        sizeType: ['compressed'],
        sourceType: ['album'],
        success: (res) => {
          var tempFilePaths = res.tempFilePaths
          var params = {
            url: '/p/file/upload',
            filePath: tempFilePaths[0],
            name: 'file',
            callBack: (res2) => {
              this.setData({
                identityCardPicHoldCom: res2.resourcesUrl + res2.filePath,
                identityCardPicHold: res2.filePath
              })
            }
          }
          if (util.lessThan2M(res.tempFiles)) {
            http.upload(params)
          }
        }
      })
    },

    /**
     * 提交申请
     */
    submitDisterApply: function() {
      var identityCardNumber = this.identityCardNumber
      var identityCardPicBack = this.identityCardPicBack
      var identityCardPicFront = this.identityCardPicFront
      var identityCardPicHold = this.identityCardPicHold
      var distributionCardNo = this.distributionCardNo
      var realName = this.realName
      var userMobile = this.userMobile
      var needIdCardNo = this.needIdCardNo
      var neddIdCardPic = this.neddIdCardPic
      var needRealName = this.needRealName

      if (userMobile.length != 11) {
        uni.showToast({
          title: this.i18n.enterCorrectPhone,
          icon: 'none'
        })
      } else if (needRealName && realName.length < 2) {
        uni.showToast({
          title: this.i18n.enterRealName,
          icon: 'none'
        })
      } else if (needIdCardNo && identityCardNumber.length < 15) {
        uni.showToast({
          title: this.i18n.identificationTips,
          icon: 'none'
        })
      } else if (neddIdCardPic && identityCardPicFront == '') {
        uni.showToast({
          title: this.i18n.uploadIDFront,
          icon: 'none'
        })
      } else if (neddIdCardPic && identityCardPicBack == '') {
        uni.showToast({
          title: this.i18n.uploadIDBack,
          icon: 'none'
        })
      } else if (neddIdCardPic && identityCardPicHold == '') {
        uni.showToast({
          title: this.i18n.uploadIDHand,
          icon: 'none'
        })
      } else {
        var params = {
          url: '/p/distribution/register/addDistributionUser',
          method: 'post',
          data: {
            identityCardNumber: identityCardNumber,
            identityCardPicBack: identityCardPicBack,
            identityCardPicFront: identityCardPicFront,
            identityCardPicHold: identityCardPicHold,
            realName: realName,
            sharerCardNo: distributionCardNo,
            // shopId: 1,
            userMobile: userMobile
          },
          callBack: res => {
            uni.showModal({
              content: this.i18n.applicationSubmitted,
              confirmText: this.i18n.confirm,
              confirmColor: '#eb2444',
              showCancel: false,
              success: (successModalRes) => {
                if (successModalRes.confirm) {
                  this.$Router.pushTab('/pages/user/user')
                }
              }
            })
          }
        }
        http.request(params)
      }
    }
  }
}
</script>
<style>
@import "./apply-dist-con.css";
</style>
